<template>
  <div class="login-box">
    <div class="login">
      <div class="top">
        <van-form v-show="isCheckLoginMethods">
          <van-field
            style="margin-bottom: 0.3rem"
            v-model="username"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="password"
            autocomplete
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
        <i class="iconfont icon-yinleyanzou" v-if="!isCheckLoginMethods"></i>
      </div>
      <div class="down">
        <van-button
          color="#d33a31"
          size="large"
          plain
          round
          v-show="!isCheckLoginMethods"
          style="margin-bottom: 0.3rem"
          @click="changeStatus('phone')"
          >手机登录</van-button
        >
        <van-button
          color="#d33a31"
          size="large"
          plain
          round
          v-show="!isCheckLoginMethods"
          @click="changeStatus('email')"
          >邮箱登录</van-button
        >
        <van-button
          color="#d33a31"
          :style="{ justifyContent: 'center' }"
          v-if="isCheckLoginMethods"
          size="large"
          plain
          round
          @click="loginClick"
          >登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { phoneLogin } from "@/api/login.js";
export default {
  setup() {
    const router = useRouter();
    const isCheckLoginMethods = ref(false);
    const isPhoneLogin = ref(false);
    const changeStatus = (type) => {
      switch (type) {
        case "phone":
          isPhoneLogin.value = true;
          isCheckLoginMethods.value = true;
          break;
        case "email":
          isPhoneLogin.value = false;
          isCheckLoginMethods.value = true;
          break;
        default:
          isCheckLoginMethods.value = true;
          break;
      }
    };
    onMounted(() => console.log(isCheckLoginMethods.value));

    const username = ref("13719376002");
    const password = ref("qaz1370478221");
    const loginClick = async () => {
      let { data } = await phoneLogin({
        phone: username.value,
        password: password.value,
      });
      if (data.code == 200) {
        localStorage.setItem("uid", data.account.id);
        localStorage.setItem("cookie", data.cookie);
        router.push("/index");
      }
    };
    return {
      isCheckLoginMethods,
      changeStatus,
      username,
      password,
      loginClick,
    };
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100vh;
  background: $wyy-red;
  .login {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 2.5rem;
        color: #fff;
      }
    }
    .down {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>